<template>
    <div class="teamOrder">
        <div class="info">
            <div class="image">
                <img src="../../../../static/img/menpiao.png" alt="">
            </div>
            <div class="right">
                <p class="title">天士力大健康城参观门票</p>
                <p class="date">
                    参观日期：{{day}}
                </p>
                <!-- <p class="time">
                    参观时段：10:00-12:00
                </p> -->
            </div>  
        </div>
        <ul class="detail">
            <li class="li">
                <span class="name">项目类型</span> <span>：</span>
                <span class="content">{{info.name}}</span>
            </li> 
            <li class="li">
                <span class="name">姓      名</span> <span>：</span>
                <span class="content">{{info.contact_username}}</span>
            </li> 
            <li class="li">
                <span class="name">手机号码</span> <span>：</span>
                <span class="content">{{info.contact_phone}}</span>
            </li> 
            <li class="li">
                <span class="name">团队人数</span> <span>：</span>
                <span class="content">{{info.people_num}} 人</span>
            </li> 
        </ul>
        <div class="pay">
            <div class="payBtn" @click="goSuccess">
                确认信息
            </div>
        </div>
    </div>
</template>

<script>
import { Session } from '../../../assets/js/utils'
    import { teamticketorder } from '../../../http/interface'
    export default {
        name: '',
        data() {
            return {
                radio: 1,
                show: false,
                info: {

                },
                day: ''
            }
        },
        mounted() {
            this.day = Session.get('team_day')
            this.initData()
        },
        methods: {
            async goSuccess() {
                try{
                    let data = this.info
                    const res = await teamticketorder(data)
                    if(res.status == 1) {
                        this.$router.replace({
                            path: '/success',
                            query: {
                                torder_id: res.data.torder_id,
                                type: 2,
                                score: res.data.score
                            }
                        })
                    }else {
                        this.$toast(res.msg)
                    }
                }catch (error) {

                }
            },
            initData() {
                this.info = Session.get('team_order_info')
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../../style/mixin.scss";
    .teamOrder{
        width: 100vw;
        min-height: 100vh;
        background: #EEEEEE;
        // padding-bottom: 704px;
        display: flex;
        flex-direction: column;
        /deep/ .van-notice-bar__content{
            width: 100%;
            .notice{
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
        }
        .info{
            width: 100%;
            // height: 264px;
            background: #ffffff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24px 40px;
            border-bottom-left-radius: 24px;
            border-bottom-right-radius: 24px;
            .image{
                width: 280px;
                height: 210px;
                margin-right: 30px;
            }
            .right{
                flex: 1;
                .title{
                    font-size:32px;
                    font-weight:500;
                    color:rgba(50,50,50,1);
                    line-height: 1.5;
                    margin-bottom: 20px;
                    @include ellipsis(2);
                }
                .date,.time{
                    font-size:28px;
                    font-weight:400;
                    color:rgba(50,50,50,1);
                    line-height: 48px;
                }
            }
        }
        .detail{
            width: 100%;
            margin-top: 20px;
            background: #ffffff;
            border-radius: 24px;
            padding: 0 39px;
            .li{
                height: 85px;
                line-height: 85px;
                font-size:30px;
                font-weight:500;
                color:rgba(50,50,50,1);
                display: flex;
                border-bottom: 1px solid #EEEEEE;
                .name{
                    width: 150px;
                    text-align: justify;
                    text-align-last: justify;
                    display: inline-block;
                }
                .content{
                    margin-left: 170px;
                    flex: 1;
                    @include ellipsis(1);
                }
            }
            .coupon{
                height: 104px;
                padding: 0 40px;
                border-top: 1px solid #EEEEEE;
                border-bottom: 1px solid #EEEEEE;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .radio{
                    height: 100%;
                    /deep/ .van-radio{
                        height: 100%;
                    }
                }
                .radioSpan{
                    font-size: 30px;
                    line-height: 104px;
                    max-width: 560px;
                    display: inline-block;
                    @include ellipsis(1);
                }
                .more{
                    width: 36px;
                    height: 36px;
                    display: inline-block;
                    background: url('../../../../static/img/zanwugengduo.png') no-repeat center center;
                    background-size: 100% 100%;
                }
            }
            .total{
                height: 103px;
                display: flex;
                justify-content: flex-end;
                font-size:32px;
                font-weight:500;
                color:rgba(50,50,50,1);
                line-height:103px;
                padding: 0 40px;
                .money{
                    color: #E10028;
                }
            }
        }
        .pay{
            width: 100%;
            // max-height: 704px;
            background: #ffffff;
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            // position: fixed;
            // bottom: 0;
            flex: 1;
            min-height: 350px;
            .payBtn{
                width:520px;
                height:84px;
                background: #F17F2A;
                border-radius:42px;
                font-size:36px;
                font-weight:500;
                color:rgba(255,255,255,1);
                line-height:84px;
                text-align: center;
            }
        }
        .couponBox{
            width: 100%;
            max-height: 50%;
            background: #ffffff;
            position: absolute;
            bottom: 0;
            &.in{
                animation: fadeInUpBig;
                animation-duration: .7s;
            }
            // &.out{
            //     animation: fadeOutLeft;
            //     animation-duration: 1s;
            // }
            .header{
                width: 100%;
                height: 116px;
                padding: 0 24px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .header_name{
                    font-size:32px;
                    font-weight:500;
                    color:rgba(50,50,50,1);
                    line-height:32px;
                    border-left: 3px solid #F28000;
                    text-indent: 21px;
                }
                .explain{
                    font-size:28px;
                    font-weight:400;
                    color:rgba(50,50,50,1);
                    line-height:116px;
                }
            }
            .coupons{
                padding: 0 30px;
                .coupon{
                    width: 100%;
                    height: 202px;
                    background: url('../../../../static/img/youhuiquan.png') no-repeat left center;
                    background-size: 254px 202px;
                    margin-bottom: 30px;
                    border: 1px dashed #FC6F59;
                    border-left: none;
                    display: flex;
                    .left{
                        width: 254px;
                        height: 100%;
                        padding: 33px 0;
                        text-align: center;
                        // background: yellowgreen;
                        .money{
                            font-size: 28px;
                            color: #ffffff;
                            line-height: 100px;
                            span{
                                font-size: 64px;
                            }
                        }
                        .tip{
                            font-size:24px;
                            font-weight:500;
                            color:rgba(255,255,255,1);
                        }
                    }
                    .right{
                        // background: pink;
                        flex: 1;
                        padding: 32px 30px;
                        .name{
                            font-size:32px;
                            font-weight:500;
                            color:rgba(50,50,50,1);
                        }
                        .time{
                            font-size:26px;
                            font-weight:500;
                            color:rgba(50,50,50,1);
                            line-height: 82px;
                        }
                        .remain{
                            font-size:24px;
                            font-weight:400;
                            color:rgba(100,100,100,1);
                        }
                    }
                    .radioBox{
                        width: 80px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .radio{
                            width: 32px;
                            height: 32px;
                            border-radius: 50%;
                            font-size: 18px;
                            background: #DFDFDF;
                            color: #ffffff;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            &.check{
                                background: #F17F2A;
                            }
                        }
                    }
                }   
            }
        }
    }
</style>